import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:gourmet/components/screen/condition.dart';
import 'package:gourmet/extensions/ex_widget.dart';
import 'package:gourmet/model/store.dart';
import 'package:gourmet/route/index.dart';
import 'package:gourmet/ui/keep_alive.dart';
import 'package:gourmet/ui/sliver_header.dart';
import 'package:gourmet/utils/colors.dart';
import 'package:gourmet/utils/radian.dart';
import 'package:gourmet/utils/styles.dart';
import 'package:gourmet/utils/svg.dart';
import 'package:gourmet/utils/tools.dart';

class HomeIndexController extends GetxController {
  late Rx<SystemUiOverlayStyle> systemUiOverlayStyle;

  late ScrollController scrollController;

  final double maxHeight = 170;

  RxBool visible = false.obs;

  final int total = 35;

  List<String> types = ['隆江猪脚饭', '奶茶', '菠萝炒饭', '猪肉肠粉', '烧烤生蚝'];

  List<String> sorted = ['综合排序', '最近距离', '减配送', '速度快'];

  RxInt sortIndex = 0.obs;

  RxList<StoreModel> dataList = RxList([]);

  @override
  void onInit() {
    systemUiOverlayStyle = Rx(SystemUiOverlayStyle.light);
    scrollController = ScrollController()
      ..addListener(() {
        if (scrollController.offset > maxHeight) {
          systemUiOverlayStyle.value = SystemUiOverlayStyle.dark;
          visible.value = true;
        } else {
          systemUiOverlayStyle.value = SystemUiOverlayStyle.light;
          visible.value = false;
        }

        if (scrollController.position.pixels > 0 &&
            scrollController.position.pixels ==
                scrollController.position.maxScrollExtent &&
            dataList.length < total) {
          loadMore();
        }
      });
    initData();
    super.onInit();
  }

  @override
  void onClose() {
    scrollController.dispose();
    super.onClose();
  }

  Future<void> loadMore() async {
    await Future.delayed(const Duration(seconds: 2));
    initData();
  }

  void initData() {
    dataList.add(StoreModel(
        headerImg:
            'https://img0.baidu.com/it/u=655977884,3582260165&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
        storeName: '华莱士-凤凰广场2店',
        score: 4.5,
        monthSales: 312,
        avgPrice: 45,
        deliveryPrice: 20,
        minute: 20,
        distance: 2.2,
        discount: ['50减3', '100减6', '150减10']));
    dataList.add(StoreModel(
        headerImg:
            'https://img2.baidu.com/it/u=2048374330,2067526209&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
        storeName: '麦当劳-凤凰广场店',
        score: 4.5,
        monthSales: 312,
        avgPrice: 45,
        deliveryPrice: 20,
        minute: 20,
        distance: 2.2,
        discount: ['50减3', '100减6', '150减10']));
    dataList.add(StoreModel(
        headerImg:
            'https://img2.baidu.com/it/u=1762044232,2597508453&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400',
        storeName: '华莱士-凤凰广场1店',
        score: 4.5,
        monthSales: 312,
        avgPrice: 45,
        deliveryPrice: 20,
        minute: 20,
        distance: 2.2,
        discount: ['50减3', '100减6', '150减10']));
    dataList.add(StoreModel(
        headerImg:
            'https://img0.baidu.com/it/u=674491115,2187096604&fm=253&fmt=auto&app=138&f=JPEG?w=591&h=500',
        storeName: '顺德老-人民北路店',
        score: 4.5,
        monthSales: 312,
        avgPrice: 45,
        deliveryPrice: 20,
        minute: 20,
        distance: 2.2,
        discount: ['50减3', '100减6', '150减10']));
    dataList.add(StoreModel(
        headerImg:
            'https://img2.baidu.com/it/u=259178695,887234081&fm=253&fmt=auto&app=138&f=JPEG?w=595&h=500',
        storeName: '龙凤茶楼-凤凰广场',
        score: 4.5,
        monthSales: 312,
        avgPrice: 45,
        deliveryPrice: 20,
        minute: 20,
        distance: 2.2,
        discount: ['50减3', '100减6', '150减10']));
    dataList.add(StoreModel(
        headerImg:
            'https://img0.baidu.com/it/u=655977884,3582260165&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
        storeName: '华莱士-凤凰广场2店',
        score: 4.5,
        monthSales: 312,
        avgPrice: 45,
        deliveryPrice: 20,
        minute: 20,
        distance: 2.2,
        discount: ['50减3', '100减6', '150减10']));
    dataList.add(StoreModel(
        headerImg:
            'https://img2.baidu.com/it/u=2048374330,2067526209&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
        storeName: '麦当劳-凤凰广场店',
        score: 4.5,
        monthSales: 312,
        avgPrice: 45,
        deliveryPrice: 20,
        minute: 20,
        distance: 2.2,
        discount: ['50减3', '100减6', '150减10']));
    dataList.add(StoreModel(
        headerImg:
            'https://img2.baidu.com/it/u=1762044232,2597508453&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400',
        storeName: '华莱士-凤凰广场1店',
        score: 4.5,
        monthSales: 312,
        avgPrice: 45,
        deliveryPrice: 20,
        minute: 20,
        distance: 2.2,
        discount: ['50减3', '100减6', '150减10']));
    dataList.add(StoreModel(
        headerImg:
            'https://img0.baidu.com/it/u=674491115,2187096604&fm=253&fmt=auto&app=138&f=JPEG?w=591&h=500',
        storeName: '顺德老-人民北路店',
        score: 4.5,
        monthSales: 312,
        avgPrice: 45,
        deliveryPrice: 20,
        minute: 20,
        distance: 2.2,
        discount: ['50减3', '100减6', '150减10']));
    dataList.add(StoreModel(
        headerImg:
            'https://img2.baidu.com/it/u=259178695,887234081&fm=253&fmt=auto&app=138&f=JPEG?w=595&h=500',
        storeName: '龙凤茶楼-凤凰广场',
        score: 4.5,
        monthSales: 312,
        avgPrice: 45,
        deliveryPrice: 20,
        minute: 20,
        distance: 2.2,
        discount: ['50减3', '100减6', '150减10']));
  }
}

class HomeIndexView extends GetView<HomeIndexController> {
  const HomeIndexView({super.key});

  @override
  Widget build(BuildContext context) {
    return Obx(() => AnnotatedRegion<SystemUiOverlayStyle>(
          value: controller.systemUiOverlayStyle.value,
          child: Stack(
            clipBehavior: Clip.none,
            children: [
              CustomScrollView(
                controller: controller.scrollController,
                slivers: [
                  SliverToBoxAdapter(
                    child: Container(
                      height: controller.maxHeight,
                      padding: EdgeInsets.only(
                          top: Get.mediaQuery.padding.top + 15,
                          left: 15.w,
                          right: 15.w),
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                          colors: [
                            ColorsUtils.rgba(255, 153, 0, 1),
                            ColorsUtils.rgba(255, 153, 0, 1),
                            ColorsUtils.rgba(255, 100, 77, 1),
                            ColorsUtils.rgba(255, 100, 77, 1)
                          ],
                          stops: const [0, 0, 1.0, 1.0],
                          transform: GradientRotation(
                            RadianUtils.angleToRadian(90),
                          ),
                        ),
                      ),
                      alignment: Alignment.centerLeft,
                      child: Column(
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Wrap(
                                spacing: 5,
                                alignment: WrapAlignment.start,
                                crossAxisAlignment: WrapCrossAlignment.center,
                                children: [
                                  SvgUtils.assetName('u236',
                                      width: 15.w, height: 18),
                                  RichText(
                                    text: TextSpan(
                                      children: [
                                        TextSpan(
                                            text: '深圳北站中心公园 ',
                                            style: StylesUtils.customTextStyle(
                                                fontSize:
                                                    StylesUtils.fontSize16)),
                                        WidgetSpan(
                                            child: Icon(
                                              Icons.keyboard_arrow_down_rounded,
                                              size: 20.w,
                                              color: Colors.white,
                                            ),
                                            alignment:
                                                PlaceholderAlignment.middle)
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                              Stack(
                                clipBehavior: Clip.none,
                                children: [
                                  SvgUtils.assetName('u247',
                                      width: 21.w, height: 22),
                                  Positioned(
                                    top: -6.w,
                                    right: -4,
                                    child: Container(
                                      alignment: Alignment.center,
                                      constraints: const BoxConstraints.expand(
                                          width: 15, height: 15),
                                      decoration: BoxDecoration(
                                          color: Colors.white,
                                          borderRadius:
                                              BorderRadius.circular(7.5)),
                                      child: Text(
                                        '2',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: 11.sp,
                                            color: ColorsUtils.colorFf64),
                                      ),
                                    ),
                                  )
                                ],
                              )
                            ],
                          ),
                          Container(
                            padding: const EdgeInsets.only(top: 20),
                            alignment: Alignment.center,
                            child: TextField(
                              cursorHeight: 20,
                              cursorWidth: 3,
                              cursorRadius: const Radius.circular(2),
                              cursorColor: Colors.blue,
                              decoration: InputDecoration(
                                fillColor: Colors.white,
                                hintText: '华莱士',
                                hintStyle: StylesUtils.customTextStyle(
                                    color: ColorsUtils.color9999),
                                isCollapsed: true,
                                filled: true,
                                isDense: true,
                                prefixIcon: SvgUtils.assetName('u241',
                                    width: 14, height: 14),
                                prefixIconConstraints:
                                    const BoxConstraints.expand(
                                        width: 40, height: 14),
                                contentPadding:
                                    const EdgeInsets.symmetric(vertical: 5),
                                enabledBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(17.5),
                                  borderSide: BorderSide.none,
                                ),
                                focusedBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(17.5),
                                  borderSide: BorderSide.none,
                                ),
                                border: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(17.5),
                                  borderSide: BorderSide.none,
                                ),
                                constraints: const BoxConstraints.expand(
                                    width: 345, height: 35),
                              ),
                              readOnly: true,
                              onTap: () {
                                Get.toNamed(Routes.searchStore);
                              },
                            ),
                          ),
                          Container(
                            padding: const EdgeInsets.only(top: 10),
                            alignment: Alignment.centerLeft,
                            child: Wrap(
                              spacing: 10,
                              alignment: WrapAlignment.start,
                              crossAxisAlignment: WrapCrossAlignment.center,
                              children: controller.types
                                  .map(
                                    (e) => Builder(builder: (_) {
                                      final style = StylesUtils.customTextStyle(
                                          color: ColorsUtils.color7979,
                                          fontSize: StylesUtils.fontSize12);
                                      double w = ToolsUtils.calculateTextWidth(
                                          value: e, style: style);
                                      return Container(
                                        alignment: Alignment.center,
                                        constraints: BoxConstraints.expand(
                                            width: w + 15, height: 25),
                                        decoration: BoxDecoration(
                                          color: ColorsUtils.rgba(
                                              245, 245, 245, 0.898039215686275),
                                          borderRadius:
                                              BorderRadius.circular(5),
                                        ),
                                        child: Text(
                                          e,
                                          style: style,
                                        ),
                                      ).onTap(() {
                                        Get.toNamed(Routes.searchStoreResult);
                                      });
                                    }),
                                  )
                                  .toList(),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                  SliverVisibility(
                    sliver: SliverPersistentHeader(
                      delegate: SliverHeaderDelegate.builder(
                          maxHeight: 132,
                          minHeight: 132,
                          builder: (_, shrinkOffset, overlapsContent) {
                            return Container(
                              color: Colors.white,
                              padding: EdgeInsets.only(
                                  top: Get.mediaQuery.padding.top + 10),
                              child: Column(
                                children: [
                                  Center(
                                    child: TextField(
                                      cursorHeight: 20,
                                      cursorWidth: 3,
                                      cursorRadius: const Radius.circular(2),
                                      cursorColor: Colors.blue,
                                      decoration: InputDecoration(
                                        fillColor: Colors.white,
                                        hintText: '华莱士',
                                        hintStyle: StylesUtils.customTextStyle(
                                            color: ColorsUtils.color9999),
                                        isCollapsed: true,
                                        filled: true,
                                        isDense: true,
                                        prefixIcon: SvgUtils.assetName('u241',
                                            width: 14, height: 14),
                                        prefixIconConstraints:
                                            const BoxConstraints.expand(
                                                width: 40, height: 14),
                                        contentPadding:
                                            const EdgeInsets.symmetric(
                                                vertical: 12),
                                        enabledBorder: OutlineInputBorder(
                                            borderRadius:
                                                BorderRadius.circular(17.5),
                                            borderSide: BorderSide(
                                                color: ColorsUtils.rgba(
                                                    255, 100, 77, 1))),
                                        focusedBorder: OutlineInputBorder(
                                          borderRadius:
                                              BorderRadius.circular(17.5),
                                          borderSide: BorderSide(
                                              color: ColorsUtils.rgba(
                                                  255, 100, 77, 1)),
                                        ),
                                        border: OutlineInputBorder(
                                          borderRadius:
                                              BorderRadius.circular(17.5),
                                          borderSide: BorderSide(
                                            color: ColorsUtils.rgba(
                                                255, 100, 77, 1),
                                          ),
                                        ),
                                        constraints:
                                            const BoxConstraints.expand(
                                                width: 345, height: 35),
                                      ),
                                      readOnly: true,
                                      onTap: () {
                                        Get.toNamed(Routes.searchStore);
                                      },
                                    ),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(top: 10),
                                    padding:
                                        EdgeInsets.symmetric(horizontal: 10.w),
                                    alignment: Alignment.centerLeft,
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Wrap(
                                          spacing: 10,
                                          children: children2,
                                        ),
                                        IconButton(
                                          onPressed: () {
                                            openSelected(context);
                                          },
                                          icon: SvgUtils.assetName('u257',
                                              width: 16.w, height: 14),
                                        ),
                                      ],
                                    ),
                                  )
                                ],
                              ),
                            );
                          }),
                      pinned: true,
                    ),
                    visible: controller.visible.value,
                  ),
                  SliverPadding(
                    padding: const EdgeInsets.symmetric(vertical: 10),
                    sliver: SliverToBoxAdapter(
                      child: GridView.count(
                        crossAxisCount: 5,
                        physics: const NeverScrollableScrollPhysics(),
                        shrinkWrap: true,
                        crossAxisSpacing: 10,
                        mainAxisSpacing: 15,
                        childAspectRatio: 0.8,
                        children: [
                          GestureDetector(
                            onTap: () {
                              Get.toNamed(Routes.classifyOrdinary);
                            },
                            child: Column(
                              children: [
                                Center(
                                  child: CircleAvatar(
                                    backgroundColor:
                                        ColorsUtils.rgb(255, 225, 233),
                                    radius: 22.5,
                                    child: Center(
                                      child: SvgUtils.assetName('u282',
                                          width: 33.w, height: 26),
                                    ),
                                  ),
                                ),
                                Container(
                                  margin: const EdgeInsets.only(top: 10),
                                  alignment: Alignment.center,
                                  child: Text(
                                    '美食',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color0000,
                                        fontSize: StylesUtils.fontSize13),
                                  ),
                                )
                              ],
                            ),
                          ),
                          Column(
                            children: [
                              Center(
                                child: CircleAvatar(
                                  backgroundColor:
                                      ColorsUtils.rgb(255, 241, 220),
                                  radius: 22.5,
                                  child: Center(
                                    child: SvgUtils.assetName('u286',
                                        width: 26.w, height: 29),
                                  ),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 10),
                                alignment: Alignment.center,
                                child: Text(
                                  '快食简餐',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color0000,
                                      fontSize: StylesUtils.fontSize13),
                                ),
                              )
                            ],
                          ),
                          Column(
                            children: [
                              Center(
                                child: CircleAvatar(
                                  backgroundColor:
                                      ColorsUtils.rgb(227, 255, 243),
                                  radius: 22.5,
                                  child: Center(
                                    child: SvgUtils.assetName('u290',
                                        width: 30.w, height: 33),
                                  ),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 10),
                                alignment: Alignment.center,
                                child: Text(
                                  '生鲜果蔬',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color0000,
                                      fontSize: StylesUtils.fontSize13),
                                ),
                              )
                            ],
                          ),
                          Column(
                            children: [
                              Center(
                                child: CircleAvatar(
                                  backgroundColor:
                                      ColorsUtils.rgb(255, 227, 219),
                                  radius: 22.5,
                                  child: Center(
                                    child: SvgUtils.assetName('u294',
                                        width: 33.w, height: 26),
                                  ),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 10),
                                alignment: Alignment.center,
                                child: Text(
                                  '商超便利',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color0000,
                                      fontSize: StylesUtils.fontSize13),
                                ),
                              )
                            ],
                          ),
                          Column(
                            children: [
                              Center(
                                child: CircleAvatar(
                                  backgroundColor:
                                      ColorsUtils.rgb(227, 255, 243),
                                  radius: 22.5,
                                  child: Center(
                                    child: SvgUtils.assetName('u738',
                                        width: 33.w, height: 26),
                                  ),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 10),
                                alignment: Alignment.center,
                                child: Text(
                                  '买药',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color0000,
                                      fontSize: StylesUtils.fontSize13),
                                ),
                              )
                            ],
                          ),
                          Column(
                            children: [
                              Center(
                                child: CircleAvatar(
                                  backgroundColor:
                                      ColorsUtils.rgb(251, 225, 255),
                                  radius: 22.5,
                                  child: Center(
                                    child: SvgUtils.assetName('u302',
                                        width: 26.w, height: 31),
                                  ),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 10),
                                alignment: Alignment.center,
                                child: Text(
                                  '甜点饮品',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color0000,
                                      fontSize: StylesUtils.fontSize13),
                                ),
                              )
                            ],
                          ),
                          Column(
                            children: [
                              Center(
                                child: CircleAvatar(
                                  backgroundColor:
                                      ColorsUtils.rgb(233, 244, 255),
                                  radius: 22.5,
                                  child: Center(
                                    child: SvgUtils.assetName('u306',
                                        width: 30.w, height: 34),
                                  ),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 10),
                                alignment: Alignment.center,
                                child: Text(
                                  '鲜花蛋糕',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color0000,
                                      fontSize: StylesUtils.fontSize13),
                                ),
                              )
                            ],
                          ),
                          Column(
                            children: [
                              Center(
                                child: CircleAvatar(
                                  backgroundColor:
                                      ColorsUtils.rgb(255, 247, 220),
                                  radius: 22.5,
                                  child: Center(
                                    child: SvgUtils.assetName('u310',
                                        width: 30.w, height: 33),
                                  ),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 10),
                                alignment: Alignment.center,
                                child: Text(
                                  '平台专送',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color0000,
                                      fontSize: StylesUtils.fontSize13),
                                ),
                              )
                            ],
                          ),
                          Column(
                            children: [
                              Center(
                                child: CircleAvatar(
                                  backgroundColor:
                                      ColorsUtils.rgb(227, 255, 243),
                                  radius: 22.5,
                                  child: Center(
                                    child: SvgUtils.assetName('u314',
                                        width: 33.w, height: 26),
                                  ),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 10),
                                alignment: Alignment.center,
                                child: Text(
                                  '美食团购',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color0000,
                                      fontSize: StylesUtils.fontSize13),
                                ),
                              )
                            ],
                          ).onTap(() {
                            Get.toNamed(Routes.deliciousGroup);
                          }),
                          GestureDetector(
                            onTap: () {
                              Get.toNamed(Routes.classifyAll);
                            },
                            child: Column(
                              children: [
                                Center(
                                  child: CircleAvatar(
                                    backgroundColor:
                                        ColorsUtils.rgb(233, 236, 255),
                                    radius: 22.5,
                                    child: Center(
                                      child: SvgUtils.assetName('u318',
                                          width: 33.w, height: 26),
                                    ),
                                  ),
                                ),
                                Container(
                                  margin: const EdgeInsets.only(top: 10),
                                  alignment: Alignment.center,
                                  child: Text(
                                    '全部',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color0000,
                                        fontSize: StylesUtils.fontSize13),
                                  ),
                                )
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  SliverToBoxAdapter(
                    child: Image.network(
                      'https://cdn7.axureshop.com/demo2024/1877666/images/%E9%A6%96%E9%A1%B5/u762.png',
                      height: 100,
                      width: double.infinity,
                    ).onTap(() {
                      Get.toNamed(Routes.couponsCenter);
                    }),
                  ),
                  SliverPadding(
                    padding: const EdgeInsets.symmetric(vertical: 10),
                    sliver: SliverToBoxAdapter(
                      child: Row(
                        children: [
                          Expanded(
                              child: GestureDetector(
                            onTap: () {
                              Get.toNamed(Routes.deliciousFood);
                            },
                            child: Center(
                              child: Container(
                                width: 108.w,
                                height: 150,
                                decoration: BoxDecoration(
                                    color: ColorsUtils.rgba(255, 247, 225, 1),
                                    borderRadius: BorderRadius.circular(10)),
                                padding: EdgeInsets.all(10.w),
                                child: Column(
                                  children: [
                                    Container(
                                      alignment: Alignment.centerLeft,
                                      child: Text(
                                        '美食HOT',
                                        style: StylesUtils.customTextStyle(
                                            color: ColorsUtils.colorCc66,
                                            fontSize: StylesUtils.fontSize16),
                                      ),
                                    ),
                                    Container(
                                      alignment: Alignment.centerLeft,
                                      margin: const EdgeInsets.only(top: 5),
                                      child: Text(
                                        '美味进行时',
                                        style: StylesUtils.textStyle(
                                            color: ColorsUtils.rgba(
                                                204, 102, 0, 0.8),
                                            fontSize: StylesUtils.fontSize12),
                                      ),
                                    ),
                                    Container(
                                      alignment: Alignment.center,
                                      child: ClipRRect(
                                        borderRadius:
                                            BorderRadius.circular(5.r),
                                        child: Image.network(
                                          'https://pic.rmb.bdstatic.com/bjh/607b296f21255837ebc32a4b99c9f4af5461.jpeg@h_1280',
                                          width: 88.w,
                                          height: 85,
                                        ),
                                      ),
                                    )
                                  ],
                                ),
                              ),
                            ),
                          )),
                          Expanded(
                              child: Center(
                            child: Container(
                              width: 108.w,
                              height: 150,
                              decoration: BoxDecoration(
                                  color: ColorsUtils.rgba(249, 244, 255, 1),
                                  borderRadius: BorderRadius.circular(10)),
                              padding: EdgeInsets.all(10.w),
                              child: Column(
                                children: [
                                  Container(
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '五折商家',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.colorCc66,
                                          fontSize: StylesUtils.fontSize16),
                                    ),
                                  ),
                                  Container(
                                    alignment: Alignment.centerLeft,
                                    margin: const EdgeInsets.only(top: 5),
                                    child: Text(
                                      '美食也大促',
                                      style: StylesUtils.textStyle(
                                          color: ColorsUtils.rgba(
                                              204, 102, 0, 0.8),
                                          fontSize: StylesUtils.fontSize12),
                                    ),
                                  ),
                                  Container(
                                    alignment: Alignment.center,
                                    child: ClipRRect(
                                      borderRadius: BorderRadius.circular(5.r),
                                      child: Image.network(
                                        'https://img1.baidu.com/it/u=4107395351,193210287&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
                                        width: 88.w,
                                        height: 85,
                                      ),
                                    ),
                                  )
                                ],
                              ),
                            ),
                          )),
                          Expanded(
                              child: Center(
                            child: SizedBox(
                              width: 108.w,
                              child: Column(
                                children: [
                                  Container(
                                    height: 70,
                                    padding: EdgeInsets.all(10.w),
                                    decoration: BoxDecoration(
                                        color:
                                            ColorsUtils.rgba(255, 241, 236, 1),
                                        borderRadius:
                                            BorderRadius.circular(10.r)),
                                    child: Stack(
                                      children: [
                                        Column(
                                          children: [
                                            Container(
                                              alignment: Alignment.centerLeft,
                                              child: Text(
                                                '新店特惠',
                                                style:
                                                    StylesUtils.customTextStyle(
                                                        color: ColorsUtils
                                                            .colorFf64,
                                                        fontSize: StylesUtils
                                                            .fontSize15),
                                              ),
                                            ),
                                            Container(
                                              margin:
                                                  const EdgeInsets.only(top: 5),
                                              alignment: Alignment.centerLeft,
                                              child: Text(
                                                '开张大吉',
                                                style: StylesUtils.textStyle(
                                                    color: ColorsUtils.rgba(
                                                        255, 102, 51, 0.8),
                                                    fontSize:
                                                        StylesUtils.fontSize12),
                                              ),
                                            )
                                          ],
                                        ),
                                        Positioned(
                                            right: 5.w,
                                            bottom: 5,
                                            child: Image.network(
                                              'https://cdn7.axureshop.com/demo2024/1877666/images/%E9%A6%96%E9%A1%B5_%E6%9C%AA%E7%99%BB%E5%BD%95/u348.png',
                                              width: 30.w,
                                              height: 30,
                                            ))
                                      ],
                                    ),
                                  ),
                                  Container(
                                    height: 70,
                                    padding: EdgeInsets.all(10.w),
                                    decoration: BoxDecoration(
                                        color:
                                            ColorsUtils.rgba(241, 247, 252, 1),
                                        borderRadius:
                                            BorderRadius.circular(10.r)),
                                    child: Stack(
                                      children: [
                                        Column(
                                          children: [
                                            Container(
                                              alignment: Alignment.centerLeft,
                                              child: Text(
                                                '免费配送',
                                                style:
                                                    StylesUtils.customTextStyle(
                                                        color: ColorsUtils
                                                            .colorCc66,
                                                        fontSize: StylesUtils
                                                            .fontSize15),
                                              ),
                                            ),
                                            Container(
                                              margin:
                                                  const EdgeInsets.only(top: 5),
                                              alignment: Alignment.centerLeft,
                                              child: Text(
                                                '外卖更省',
                                                style: StylesUtils.textStyle(
                                                    color: ColorsUtils.rgba(
                                                        204, 102, 204, 0.8),
                                                    fontSize:
                                                        StylesUtils.fontSize12),
                                              ),
                                            )
                                          ],
                                        ),
                                        Positioned(
                                            right: 5.w,
                                            bottom: 5,
                                            child: Image.network(
                                              'https://cdn7.axureshop.com/demo2024/1877666/images/%E9%A6%96%E9%A1%B5_%E6%9C%AA%E7%99%BB%E5%BD%95/u345.png',
                                              width: 30.w,
                                              height: 30,
                                            ))
                                      ],
                                    ),
                                  )
                                ],
                              ),
                            ),
                          ))
                        ],
                      ),
                    ),
                  ),
                  SliverVisibility(
                    sliver: SliverToBoxAdapter(
                      child: Padding(
                        padding: EdgeInsets.symmetric(horizontal: 10.w),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Wrap(
                              spacing: 10,
                              children: children,
                            ),
                            IconButton(
                              onPressed: () {
                                openSelected(context);
                              },
                              icon: SvgUtils.assetName('u257',
                                  width: 16.w, height: 14),
                            )
                          ],
                        ),
                      ),
                    ),
                    visible: !controller.visible.value,
                  ),
                  SliverSafeArea(
                    sliver: SliverList(
                      delegate: SliverChildBuilderDelegate(
                        (BuildContext context, int index) {
                          if (index == controller.dataList.length) {
                            if (index < controller.total) {
                              return Container(
                                margin: const EdgeInsets.all(10),
                                child: Align(
                                  child: CircularProgressIndicator(
                                    strokeWidth: 3,
                                    color: ColorsUtils.rgba(255, 153, 0, 1),
                                  ),
                                ),
                              );
                            }
                            return Container(
                              padding: EdgeInsets.symmetric(vertical: 15.w),
                              alignment: Alignment.center,
                              child: Text(
                                '我是有底线的...',
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.color7979),
                              ),
                            );
                          }
                          final row = controller.dataList[index];
                          return Center(
                            child: GestureDetector(
                              onTap: () {
                                Get.toNamed(Routes.storeMain);
                              },
                              child: Container(
                                width: 345.w,
                                height: 140,
                                margin: const EdgeInsets.only(bottom: 10),
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(10.r),
                                    color: Colors.white),
                                padding: EdgeInsets.symmetric(
                                    vertical: 10.w, horizontal: 10.w),
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    ClipRRect(
                                      borderRadius: BorderRadius.circular(5),
                                      child: Image.network(
                                        row.headerImg,
                                        width: 100.w,
                                        height: 100.w,
                                      ),
                                    ),
                                    Expanded(
                                        child: Padding(
                                      padding: EdgeInsets.only(left: 10.w),
                                      child: Column(
                                        children: [
                                          Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceBetween,
                                            children: [
                                              Container(
                                                constraints:
                                                    const BoxConstraints(
                                                        maxWidth: 150),
                                                alignment: Alignment.centerLeft,
                                                child: Text(
                                                  row.storeName,
                                                  style: StylesUtils
                                                      .customTextStyle(
                                                          fontSize: StylesUtils
                                                              .fontSize16,
                                                          fontWeight:
                                                              FontWeight.w700,
                                                          color: ColorsUtils
                                                              .color0000),
                                                  maxLines: 1,
                                                  overflow:
                                                      TextOverflow.ellipsis,
                                                ),
                                              ),
                                              InkWell(
                                                  onTap: () {},
                                                  child: SvgUtils.assetName(
                                                      'u342',
                                                      width: 12.w,
                                                      height: 4))
                                            ],
                                          ),
                                          Container(
                                            alignment: Alignment.centerLeft,
                                            margin: const EdgeInsets.only(
                                                top: 8, bottom: 8),
                                            child: RichText(
                                              text: TextSpan(children: [
                                                TextSpan(
                                                    text: '${row.score}分  ',
                                                    style: StylesUtils
                                                        .customTextStyle(
                                                            fontSize:
                                                                StylesUtils
                                                                    .fontSize12,
                                                            color: ColorsUtils
                                                                .colorFf64)),
                                                TextSpan(
                                                    text:
                                                        '月售${row.monthSales}  人均￥${row.avgPrice}',
                                                    style: StylesUtils
                                                        .customTextStyle(
                                                            fontSize:
                                                                StylesUtils
                                                                    .fontSize12,
                                                            color: ColorsUtils
                                                                .color7979)),
                                                TextSpan(
                                                    text: '  平台专送',
                                                    style: StylesUtils
                                                        .customTextStyle(
                                                            color: ColorsUtils
                                                                .colorFf64,
                                                            fontSize: StylesUtils
                                                                .fontSize11))
                                              ]),
                                            ),
                                          ),
                                          Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceBetween,
                                            children: [
                                              Text(
                                                '起送￥${row.deliveryPrice}  免配送费',
                                                style:
                                                    StylesUtils.customTextStyle(
                                                        fontSize: StylesUtils
                                                            .fontSize12,
                                                        color: ColorsUtils
                                                            .color7979),
                                              ),
                                              Text(
                                                '${row.minute}分钟  ${row.distance}km',
                                                style:
                                                    StylesUtils.customTextStyle(
                                                        fontSize: StylesUtils
                                                            .fontSize12,
                                                        color: ColorsUtils
                                                            .color7979),
                                              )
                                            ],
                                          ),
                                          Container(
                                            margin:
                                                const EdgeInsets.only(top: 8),
                                            alignment: Alignment.centerLeft,
                                            child: Wrap(
                                              spacing: 10,
                                              children: row.discount
                                                  .map((e) => TagItem(e))
                                                  .toList(),
                                            ),
                                          )
                                        ],
                                      ),
                                    ))
                                  ],
                                ),
                              ),
                            ),
                          );
                        },
                        childCount: controller.dataList.length + 1,
                      ),
                    ),
                  )
                ],
              ),
              Positioned(
                right: 10.w,
                bottom: 10,
                child: Visibility(
                  visible: controller.visible.value,
                  maintainState: true,
                  maintainAnimation: true,
                  child: GestureDetector(
                    onTap: () {
                      Get.toNamed(Routes.shopCart);
                    },
                    child: Stack(
                      clipBehavior: Clip.none,
                      children: [
                        Container(
                          constraints:
                              BoxConstraints.expand(width: 45.w, height: 45.w),
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                              image: DecorationImage(
                                  image: ToolsUtils.assetImage('u795.png'))),
                          child: SvgUtils.assetName('u247',
                              width: 21.w, height: 22),
                        ),
                        Positioned(
                            top: 2,
                            right: 2,
                            child: Container(
                              constraints: BoxConstraints.expand(
                                  width: 18.w, height: 18.w),
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                  color: ColorsUtils.parseColorFromHexString(
                                      ColorsUtils.colorFf00),
                                  borderRadius: BorderRadius.circular(9.w)),
                              child: Text(
                                '2',
                                style: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize11),
                              ),
                            ))
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ));
  }

  List<Widget> get children {
    List<Widget> list = [];
    controller.sorted
        .asMap()
        .map((key, value) => MapEntry(
            key,
            InkWell(
              onTap: () {
                controller.sortIndex.value = key;
              },
              child: Container(
                alignment: Alignment.center,
                constraints: const BoxConstraints.expand(width: 70, height: 30),
                decoration:
                    getActiveBoxDecoration(key == controller.sortIndex.value),
                child: Text(
                  value,
                  style: StylesUtils.customTextStyle(
                      color: controller.sortIndex.value == key
                          ? ColorsUtils.colorFfff
                          : ColorsUtils.color9999,
                      fontSize: StylesUtils.fontSize13),
                ),
              ),
            )))
        .values
        .forEach((v) => list.add(v));
    return list;
  }

  List<Widget> get children2 {
    List<Widget> list = [];
    controller.sorted
        .asMap()
        .map(
          (key, value) => MapEntry(
            key,
            Obx(
              () => InkWell(
                onTap: () {
                  controller.sortIndex.value = key;
                },
                child: Container(
                  alignment: Alignment.center,
                  constraints:
                      const BoxConstraints.expand(width: 70, height: 30),
                  decoration: getActiveBoxDecoration2(
                      key == controller.sortIndex.value),
                  child: Text(
                    value,
                    style: StylesUtils.customTextStyle(
                        color: controller.sortIndex.value == key
                            ? ColorsUtils.colorFfff
                            : ColorsUtils.color9999,
                        fontSize: StylesUtils.fontSize13),
                  ),
                ),
              ),
            ),
          ),
        )
        .values
        .forEach((v) => list.add(v));
    return list;
  }

  BoxDecoration? getActiveBoxDecoration(bool active) {
    if (active) {
      return BoxDecoration(
        borderRadius: BorderRadius.circular(5.r),
        gradient: LinearGradient(colors: [
          //linear-gradient(90deg, rgba(255, 153, 0, 1) 0%, rgba(255, 153, 0, 1) 0%, rgba(254, 70, 1, 1) 100%, rgba(254, 70, 1, 1) 100%)
          ColorsUtils.rgba(255, 153, 0, 1),
          ColorsUtils.rgba(255, 153, 0, 1),
          ColorsUtils.rgba(254, 70, 1, 1),
          ColorsUtils.rgba(254, 70, 1, 1)
        ], stops: const [
          0,
          0,
          1.0,
          1.0
        ], transform: GradientRotation(RadianUtils.angleToRadian(90))),
      );
    }
    return BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(5.r),
    );
  }

  BoxDecoration? getActiveBoxDecoration2(bool active) {
    if (active) {
      return BoxDecoration(
        borderRadius: BorderRadius.circular(5.r),
        gradient: LinearGradient(colors: [
          //linear-gradient(90deg, rgba(255, 153, 0, 1) 0%, rgba(255, 153, 0, 1) 0%, rgba(254, 70, 1, 1) 100%, rgba(254, 70, 1, 1) 100%)
          ColorsUtils.rgba(255, 153, 0, 1),
          ColorsUtils.rgba(255, 153, 0, 1),
          ColorsUtils.rgba(254, 70, 1, 1),
          ColorsUtils.rgba(254, 70, 1, 1)
        ], stops: const [
          0,
          0,
          1.0,
          1.0
        ], transform: GradientRotation(RadianUtils.angleToRadian(90))),
      );
    }
    return BoxDecoration(
      color: ColorsUtils.rgba(249, 249, 249, 1),
      borderRadius: BorderRadius.circular(5.r),
    );
  }

  void openSelected(BuildContext context) {
    Get.log('ok');
    Navigator.of(context).push(DismissibleDialog<void>());
  }
}

class TagItem extends StatelessWidget {
  final String text;

  const TagItem(this.text, {super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      constraints: const BoxConstraints(maxWidth: 55, minWidth: 40),
      decoration: BoxDecoration(
          color: ColorsUtils.rgba(255, 255, 255, 0),
          borderRadius: BorderRadius.circular(3.r),
          border: Border.all(
              color:
                  ColorsUtils.parseColorFromHexString(ColorsUtils.colorFf64))),
      alignment: Alignment.center,
      child: Text(
        text,
        style: StylesUtils.customTextStyle(
            fontSize: StylesUtils.fontSize12, color: ColorsUtils.colorFf64),
      ),
    );
  }
}

class DismissibleDialog<T> extends PopupRoute<T> {
  @override
  Color? get barrierColor => Colors.black.withAlpha(0x50);

  @override
  bool get barrierDismissible => true;

  @override
  String? get barrierLabel => 'Dismissible Dialog';

  @override
  Duration get transitionDuration => const Duration(milliseconds: 300);

  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return build(context, animation, secondaryAnimation);
  }

  Widget build(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return Material(
      color: barrierColor,
      child: SlideTransition(
        position:
            Tween(begin: const Offset(0, -1), end: const Offset(0, 0)).animate(
          CurvedAnimation(
            parent: animation,
            curve: Curves.linear,
          ),
        ),
        child: Column(
          children: [
            Container(
              height: 40 + Get.mediaQuery.padding.top,
              alignment: Alignment.center,
              color: Colors.white,
              padding: EdgeInsets.only(top: Get.mediaQuery.padding.top + 10),
              child: TextField(
                cursorHeight: 20,
                cursorWidth: 3,
                cursorRadius: const Radius.circular(2),
                cursorColor: Colors.blue,
                decoration: InputDecoration(
                  fillColor: Colors.white,
                  hintText: '华莱士',
                  hintStyle:
                      StylesUtils.customTextStyle(color: ColorsUtils.color9999),
                  isCollapsed: true,
                  filled: true,
                  isDense: true,
                  suffixIcon: Container(
                    decoration: BoxDecoration(
                      //linear-gradient(90deg, rgba(255, 153, 0, 1) 0%, rgba(255, 153, 0, 1) 0%, rgba(255, 100, 77, 1) 100%, rgba(255, 100, 77, 1) 100%)
                      gradient: LinearGradient(
                        colors: [
                          ColorsUtils.rgba(255, 153, 0, 1),
                          ColorsUtils.rgba(255, 153, 0, 1),
                          ColorsUtils.rgba(255, 100, 77, 1),
                          ColorsUtils.rgba(255, 100, 77, 1)
                        ],
                        stops: const [0, 0, 1.0, 1.0],
                        begin: Alignment.centerLeft,
                        end: Alignment.centerRight,
                        transform: GradientRotation(
                          RadianUtils.angleToRadian(90),
                        ),
                      ),
                      borderRadius: const BorderRadius.only(
                        topRight: Radius.circular(18),
                        bottomRight: Radius.circular(18),
                      ),
                    ),
                    alignment: Alignment.center,
                    child: Text(
                      '搜索',
                      style: StylesUtils.customTextStyle(),
                    ),
                  ),
                  suffixIconConstraints:
                      const BoxConstraints.expand(width: 60, height: 35),
                  contentPadding:
                      const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
                  enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(17.5),
                    borderSide: BorderSide(
                      color: ColorsUtils.rgba(255, 100, 77, 1),
                    ),
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(17.5),
                    borderSide:
                        BorderSide(color: ColorsUtils.rgba(255, 100, 77, 1)),
                  ),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(17.5),
                    borderSide: BorderSide(
                      color: ColorsUtils.rgba(255, 100, 77, 1),
                    ),
                  ),
                  constraints:
                      const BoxConstraints.expand(width: 345, height: 35),
                ),
                readOnly: true,
                onTap: () {
                  Get.toNamed(Routes.searchStore);
                },
              ),
            ),
            KeepAliveWrapperView(
              child: const ScreenConditionView().onTap(() {}),
              callback: () {
                Get.lazyPut(() => ScreenConditionController());
              },
            )
          ],
        ),
      ),
    ).onTap(Get.back);
  }
}
